// default buttons
.dx-btn {
    position: relative;
    display: inline-block;
    padding: 11px 26px;
    margin: 0;
    font-family: $font_title;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: $color_main_1;
    border: 0;
    border-radius: 3px;
    will-change: transform, opacity;
    transition: all .15s ease-in-out;

    > .icon {
        font-size: 1.125rem;
        line-height: 0;
    }

    &:hover,
    &.hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
        color: #fff;
        text-decoration: none;
        background-color: darken($color_main_1, 10%);
        outline: none;
    }
}

// Colors
@each $name, $color in $colors {
    .dx-btn-#{$name} {
        background-color: $color;

        &:hover,
        &.hover {
            background-color: darken($color, 10%);
        }
    }
}
// Color Envato
.dx-btn-envato {
    min-width: 300px;
    background-color: map-get($colors_social, "envato");

    @media screen and #{$media_sm} {
        min-width: auto;
    }

    > .icon {
        opacity: .9;
        will-change: opacity;
        transition: opacity .2s ease-in-out;
    }

    &:hover,
    &.hover,
    &:focus,
    &.focus {
        background-color: darken(map-get($colors_social, "envato"), 10%);

        > .icon {
            opacity: 1;
        }
    }
}

// Grey
.dx-btn-grey {
    color: $color_text_3;
    background-color: lighten($color_grey_3, 18%);

    &:hover,
    &.hover,
    &:focus {
        color: $color_dark_1;
        background-color: lighten($color_grey_3, 13%);
    }
}
.dx-btn-grey-style-2 {
    color: rgba($color_grey_1, .8);
    background-color: lighten($color_grey_3, 25%);
    box-shadow: inset 0 0 0 1px lighten($color_grey_3, 18%);
    transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out, color .2s ease-in-out;

    &:hover,
    &.hover {
        color: darken($color_grey_1, 10%);
        background-color: lighten($color_grey_3, 22%);
        box-shadow: inset 0 0 0 1px lighten($color_grey_3, 10%);
    }
}

// Dark
.dx-btn-dark {
    color: #fff;
    background-color: $color_grey_2;

    &:hover,
    &.hover,
    &:focus {
        color: #fff;
        background-color: darken($color_grey_2, 15%);
    }
}

// Transparent
.dx-btn-transparent {
    color: rgba(#fff, .8);
    background-color: rgba(#fff, 0);
    box-shadow: inset 0 0 0 2px rgba(#fff, .16);

    &:hover,
    &.hover,
    &:focus,
    &.focus {
        color: $color_dark_1;
        background-color: rgba(#fff, 1);
        box-shadow: inset 0 0 0 2px #fff;
    }
}

// Transparent Style 2
.dx-btn-transparent-style-2 {
    color: #fff;
    background-color: rgba(#fff, 0);
    box-shadow: inset 0 0 0 2px #fff;

    &:hover,
    &.hover,
    &:focus,
    &.focus {
        color: $color_dark_1;
        background-color: rgba(#fff, 1);
        box-shadow: inset 0 0 0 2px #fff;
    }
}

// Link
.dx-btn-link {
    display: inline-flex;
    align-items: center;
    padding: 0;
    font-weight: 500;
    color: $color_dark_1;
    background: none;

    .icon {
        position: relative;
        top: 5px;
        height: 10px;
        margin-top: -10px;
        margin-bottom: -10px;
        font-size: 1.5rem;
    }

    &:hover,
    &:focus {
        color: $color_main_1;
        background: none;
    }
}

// block
.dx-btn-block {
    display: block;
    width: 100%;
}

// sizes
.dx-btn-xs {
    padding: 11px 20px;
    font-size: .7rem;
}
.dx-btn-sm {
    padding: 12px 25px;
    font-size: .8rem;
}
.dx-btn-md {
    padding: 16px 31px;
    letter-spacing: .03em;
}
.dx-btn-lg {
    padding: 21px 38px;
    font-size: .75rem;

    &.dx-btn-icon {
        padding: 18px 18px;
    }
}
.dx-btn-xl {
    padding: 21px 34px;
    font-size: .875rem;
    font-weight: 500;
}
.dx-btn-popup {
    padding: 22px 34px;
    font-size: .75rem;
    font-weight: 500;
}

// Load
.dx-btn-load {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 50%;
        width: 6px;
        height: 6px;
        margin-top: -15px;
        margin-right: 2px;
        border-radius: 100%;
        box-shadow: 0 6px 0 0 $color_dark_1, 10px 6px 0 0 $color_dark_1, 10px 16px 0 0 $color_dark_1, 0 16px 0 0 $color_dark_1;
        opacity: 0;
        will-change: opacity;
        transition: opacity .4s ease-in-out;
        transition-delay: .1s;
    }

    &.dx-btn-loaded {
        color: $color_text_3;
        cursor: default;
        background: none;

        &::before {
            display: none;
        }
    }

    &.dx-btn-loading {
        color: rgba(#fff, 0);
        cursor: default;
        background: none;

        &.dx-btn-loaded {
            color: $color_text_3;
        }

        &::before {
            opacity: 1;
            animation: btn 1.5s infinite;

            @keyframes btn {
                0% {
                    box-shadow: 0 6px 0 0 $color_dark_1, 10px 6px 0 0 $color_dark_1, 10px 16px 0 0 $color_dark_1, 0 16px 0 0 $color_dark_1;
                }
                3% {
                    box-shadow: 0 6px 0 0 $color_dark_1, 10px 6px 0 0 $color_dark_1, 10px 16px 0 0 $color_dark_1, 0 16px 0 0 $color_dark_1;
                }
                33% {
                    box-shadow: 10px 6px 0 0 $color_dark_1, 10px 16px 0 0 $color_dark_1, 0 16px 0 0 $color_dark_1, 0 6px 0 0 $color_dark_1;
                }
                36% {
                    box-shadow: 10px 6px 0 0 $color_dark_1, 10px 16px 0 0 $color_dark_1, 0 16px 0 0 $color_dark_1, 0 6px 0 0 $color_dark_1;
                }
                66% {
                    box-shadow: 10px 16px 0 0 $color_dark_1, 0 16px 0 0 $color_dark_1, 0 6px 0 0 $color_dark_1, 10px 6px 0 0 $color_dark_1;
                }
                69% {
                    box-shadow: 10px 16px 0 0 $color_dark_1, 0 16px 0 0 $color_dark_1, 0 6px 0 0 $color_dark_1, 10px 6px 0 0 $color_dark_1;
                }
                100% {
                    box-shadow: 0 16px 0 0 $color_dark_1, 0 6px 0 0 $color_dark_1, 10px 6px 0 0 $color_dark_1, 10px 16px 0 0 $color_dark_1;
                }
            }
        }
    }
}
